<template>
  <div class="div_goods container">
    <div class="row">
      <div class="col-12 col-md-6">
        <div class="card_imgs pl-1 pr-1 pl-md-0 pr-md-2">
          <div class="figure">
            <img
              :src="$fullUrl(img_lg || obj.img)"
              style="width: 100%; max-height: 100%"
              alt="图片丢失"
            />
          </div>
          <div class="list_sm_img">
            <div class="item" v-for="(o, i) in list_img" :key="i">
              <div class="sm_figure" @click="choose_img(o)">
                <img
                  :src="$fullUrl(o)"
                  style="width: 100%; max-height: 100%"
                  alt="图片丢失"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <!-- 商品内容 -->
        <div class="card_goods_info">
          <h3>{{ obj.title }}</h3>
          <!-- <score_star :score="score"></score_star> -->
          <div class="description">{{ obj.description }}</div>
          <div class="sales">已卖{{ obj.sales }}</div>
          <div class="price_block">
            <div class="price_item">
              <span class="price">￥{{ obj.price }}</span>
              <span class="price_ago">￥{{ obj.price_ago }}</span>
            </div>
            <score_star :score="score"></score_star>
          </div>
          <div class="bottom_handle">
            <div class="num_buy_block">
              <div class="subtract" @click="sub_num(obj)">
                <span>-</span>
              </div>
              <div class="num">
                {{ obj.num_buy }}
              </div>
              <div class="add" @click="add_num(obj)">
                <span>+</span>
              </div>
            </div>
            <div class="buy" v-if="user.user_id" @click="add_cart()">
              立即购买
            </div>
            <div class="buy" v-else @click="$nav('/account/login')">
              立即购买
            </div>
            <!-- 购物车 -->
            <div class="cart" v-if="user.user_id" @click="add_cart()">
              <b-icon icon="cart"></b-icon>
            </div>
            <div class="cart" v-else @click="$nav('/account/login')">
              <b-icon icon="cart"></b-icon>
            </div>
            <!-- 收藏 -->
            <div class="collect" v-if="user.user_id" @click="add_collect()">
              <b-icon
                style="color: var(--color_primary)"
                v-if="check_collected"
                icon="heart-fill"
              ></b-icon>
              <b-icon v-else icon="heart"></b-icon>
            </div>
            <div class="collect" v-else @click="$nav('/account/login')">
              <b-icon
                style="color: var(--color_primary)"
                v-if="check_collected"
                icon="heart-fill"
              ></b-icon>
              <b-icon v-else icon="heart"></b-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import score_star from "../../components/diy/score_star.vue";
import mixin from "../../mixins/component.js";
export default {
  mixins: [mixin],
  props: {
    obj: {
      type: Object,
      default: function () {
        return {};
      },
    },
    vm: {
      type: Object,
      default: function () {
        return {
          goods_id: "goods_id",
          title: "title",
          img: "img",
          description: "description",
          price_ago: "price_ago",
          price: "price",
          sales: "sales",
          inventory: "inventory",
          type: "type",
          hits: "hits",
          content: "content",
          create_time: "create_time",
          update_time: "update_time",
          img_1: "img_1",
          img_2: "img_2",
          img_3: "img_3",
          img_4: "img_4",
          img_5: "img_5",
        };
      },
    },
    list_img: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    score_star,
  },
  data() {
    return {
      img_lg: "",
      score: 4.5,
      check_collected: false,
    };
  },
  methods: {
    // 选择图片展示
    choose_img(o) {
      this.img_lg = o;
    },
    // 控制数量
    sub_num(o) {
      if (o.num_buy > 1) {
        o.num_buy--;
      }
    },
    add_num(o) {
      o.num_buy++;
    },
    // 添加购物车
    add_cart() {
      var {
        title,
        img,
        price,
        price_ago,
        num_buy: num,
        description,
        goods_id,
        type,
      } = this.obj;
      var body = {
        title,
        img,
        price,
        price_ago,
        num,
        price_count: price * num,
        description,
        goods_id,
        type,
        user_id: this.$store.state.user.user_id,
      };
      this.$post("~/api/cart/add?", body, (res) => {
        this.$toast("已加入购物车", "成功");
        console.log(res);
      });
    },
    // 添加收藏
    add_collect() {
      var { title, img, goods_id } = this.obj;
      var body = {
        title,
        img,
        source_table: "goods",
        source_field: "goods_id",
        source_id: goods_id,
        user_id: this.$store.state.user.user_id,
      };
      if (!this.check_collected) {
        this.check_collected = true;
        this.$post("~/api/collect/add?", body, (res) => {
          this.$toast("收藏成功");
          console.log(res);
        });
      } else {
        this.check_collected = false;
        this.$get("~/api/collect/del", body, (res) => {
          this.$toast("取消收藏");
        });
      }
    },
  },
};
</script>

<style>
.card {
  word-wrap: break-word;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
/* 图片 */
.figure {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  padding: 20px;
  box-shadow: 0 0.25rem 0.5rem 0 #ddd;
}
.list_sm_img {
  margin-top: 40px;
  display: flex;
}
.list_sm_img .item {
  width: 25%;
  padding: 0 5px;
}
.sm_figure {
  height: 90px;
  box-shadow: 0 0.25rem 0.5rem 0 #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 详情 */
.card_goods_info {
  box-shadow: 0 0.25rem 0.5rem 0 #ddd;
  height: 428px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.price_block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.card_goods_info .price {
  color: var(--color_red);
  font-weight: 600;
  font-size: 30px;
}
.card_goods_info .price_ago {
  margin-left: 0.5rem;
  text-decoration: line-through;
  font-size: 0.875rem;
  color: #999;
}
.card_goods_info .bottom_handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card_goods_info .bottom_handle .buy {
  cursor: pointer;
  background-color: var(--color_primary);
  position: relative;
  bottom: 0;
  color: #fff;
  padding: 3px 10px;
  transition: ease-in-out 0.2s;
  border-radius: 50px;
}
.card_goods_info .bottom_handle .buy:hover {
  position: relative;
  bottom: 3px;
}
.card_goods_info .bottom_handle .collect {
  cursor: pointer;
  transition: ease-in-out 0.2s;
  color: #000;
  align-items: center;
  font-size: 16px;
}
.card_goods_info .bottom_handle .collect:hover {
  color: var(--color_primary);
}
.card_goods_info .bottom_handle .cart {
  cursor: pointer;
}
.card_goods_info .bottom_handle .cart:hover {
  color: var(--color_primary);
}

/* 控制数量 */
.num_buy_block {
  display: flex;
  justify-content: space-around;
  padding: 0 10px;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 50px;
  width: 100px;
  height: 30px;
}

.num_buy_block > div {
  height: 25px;
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subtract,
.add {
  cursor: pointer;
  border-radius: 50%;
  color: #000;
  font-weight: 600;
  font-size: 20px;
  background-color: #f3f3f3;
}

.subtract span {
  position: relative;
  top: -1px;
}
</style>
